import React, { Component } from "react";
import { Modal, message, Spin, Input, Form, Select } from 'antd';
import { getTypeIdOrFrameWork, stubFrameWorkList } from "../../../fetch/fetchApi";
const Option = Select.Option;
const FormItem = Form.Item;

class RemoteUpgrade extends Component {
    constructor(props) {
        super(props);
        this.state = {
            typeIdLoading: false,
            frameWorkLoading: false
        }
    }

    getTypeIdInfo = (params = {}) => {
        this.setState({
            typeIdLoading: true
        })
        const res = getTypeIdOrFrameWork({
            stubId: params.stubIds,
            flag: 0
        });
        this.upgradeParams = {};
        res.then((data) => {
            if(!data){
                return;
            }
            if (data.data.code === "200") {
                const typeIdOptions = [];
                const dataArr = data.data.data;
                if (dataArr.length === 0) {
                    message.error("固件型号为空！");
                    this.props.handle(this.upgradeParams);
                    this.setState({
                        typeIdLoading: false,
                        typeId: "",
                        typeIdOptions: [],
                        frameWorkValue: "",
                        frameWorkOptions: []
                    })
                    return;
                }
                for ( let item of dataArr ) {
                    typeIdOptions.push(<Option value={item}>{item}</Option>);
                }
                this.upgradeParams = {
                    stubIds: params.stubIds,
                    typeId: dataArr[0]
                }
                this.setState({
                    typeIdLoading: false,
                    typeId: dataArr[0],
                    typeIdOptions: typeIdOptions
                })
                this.props.handle(this.upgradeParams);
                this.getFrameWorkInfo({
                    typeId:dataArr[0],
                    currentFrameWork:params.frameWork
                });

            } else {
                console.log(data);
                this.setState({
                    typeIdLoading: false
                })
            }
        })
    }

    getFrameWorkInfo= (params={}) => {
        this.setState({
            frameWorkLoading: true
        })
        stubFrameWorkList({
            typeId: params.typeId
        }).then((res) => {
            if(!res){
                return;
            }
            if (res.data.code === "200") {
                const frameWorkOptions = [];
                const dataArr = res.data.data;
                if (dataArr.length === 0) {
                    message.error("版本号为空！");
                    this.upgradeParams.frameWork = null;
                    this.setState({
                        frameWorkLoading: false,
                        frameWorkValue: "",
                        frameWorkOptions: []
                    })
                    this.props.handle(this.upgradeParams);
                    return;
                }
                this.upgradeParams.frameWork = params.currentFrameWork||dataArr[0];
                for ( let item of dataArr ) {
                    frameWorkOptions.push(<Option value={item}>{item}</Option>);
                }
                this.setState({
                    frameWorkLoading: false,
                    frameWorkValue: this.upgradeParams.frameWork,
                    frameWorkOptions: frameWorkOptions
                })
                this.props.handle(this.upgradeParams);
            } else {
                this.setState({
                    frameWorkLoading: false
                })
            }
        })
    }

    handleFrameWorkChange=(e) => {
        this.upgradeParams.frameWork = e;
        this.setState({
            frameWorkValue: e
        })
        this.props.handle(this.upgradeParams);
    }

    handleTypeIdChange=(e) => {
        this.upgradeParams.typeId = e;
        this.setState({
            typeId: e
        })
        this.props.handle(this.upgradeParams);

        this.getFrameWorkInfo({
            typeId:e
        });
    }


    componentDidMount() {
        this.getTypeIdInfo(this.props.params);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.params.stubIds !== this.props.params.stubIds 
            || nextProps.params.modelNos !== this.props.params.modelNos
            || nextProps.params.frameWork !== this.props.params.frameWork) {
            this.getTypeIdInfo(nextProps.params)
        }
    }

    render() {
        const formItemLayout = {
            labelCol: {
                span: 4
            },
            wrapperCol: {
                span: 16,
                offset: 3
            }
        };
        return (

            <Form layout="horizontal">
                    <Spin tip="Loading..." spinning={this.state.typeIdLoading}>
                        <FormItem label="固件型号" {...formItemLayout}>
                            <Select value={this.state.typeId} onChange={this.handleTypeIdChange}>
                                {this.state.typeIdOptions}
                            </Select>
                        </FormItem>
                    </Spin>
                    <Spin tip="Loading..." spinning={this.state.frameWorkLoading}>
                        <FormItem label="版本号" {...formItemLayout}>
                            <Select value={this.state.frameWorkValue} onChange={this.handleFrameWorkChange}>
                                {this.state.frameWorkOptions}
                            </Select>
                        </FormItem>
                    </Spin>
                </Form>

        )
    }
}
export default RemoteUpgrade;
